<template>
  <el-dialog
    v-dialogDrag
    ref="isPopWindows"
    title="提示"
    :visible.sync="isAfterSaleImport"
    width="70%"
    :append-to-body="true"
    :close-on-click-modal="false"
    center
    @close="close"
    @opened="open"
  >
    <dialogHeader
      slot="title"
      title="售后技术需求导入"
      :style-type="$store.state.app.dialogType"
    />
    <div class="formBoxContain">
      <!--
            buttons: 按钮
            froms: 表单
            fromsField: 表单对应的字段
            tableOption: 网格项
            dynamicApiConfigs: 取值
         -->
      <one-table-template
        ref="afterSaleImport"
        :dynamic-buttons="buttons"
        :dynamic-components="froms"
        :dynamic-form-fields="fromsField"
        :dynamic-table-cols="tableOption"
        :dynamic-table-defult-height="350"
        :dynamic-api-config="dynamicApiConfigs"
        :dynamic-is-show-select="true"
        :dynamic-is-init-table="false"
        :dynamic-is-fix-choose="false"
        :dynamic-is-fix-index="false"
        :callback-obj="callBackObj"
      />
    </div>
  </el-dialog>
</template>

<script>
import dialogHeader from '@/components/dialogHeader'
import OneTableTemplate from '@/components/templates/oneTable'
import api from '@/api/vehicleManagement'

export default {
  components: {
    dialogHeader,
    OneTableTemplate
  },
  props: {
    // 是否关闭弹窗
    isAfterSaleImport: {
      type: Boolean,
      default: false
    },
    // 已经选择过的数据
    shortList: { type: Array, default: () => ([]) }
  },
  data() {
    return {
      dynamicApiConfigs: api.inventoryQuery,
      froms: this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
             this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableComponents &&
             this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableComponents.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableComponents : [
          {
            compKey: 'compKey1',
            labelName: '提交时间:',
            codeField: 'startDate,endDate',
            component: () => import('@/components/org/datePicker/datePicker'),
            dateType: 'daterange',
            isMust: true,
            span: 6
          },
          {
            compKey: 'compKey2',
            labelName: '提交人:',
            codeField: 'submitName',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isMust: true,
            span: 6
          }
        ],
      fromsField: {
        startDate: '',
        endDate: '',
        submitName: ''
      },
      selectiondatas: [],
      callBackObj: {
        onCheckSelectChange: selection => {
          this.selectiondatas = selection
        }
      },
      buttons:
        [
          {
            compKey: 'button1',
            type: 'primary',
            size: 'small',
            name: 'search',
            clickEvent: () => {
              this.open()
            },
            text: '查询',
            position: 'right'
          },
          {
            compKey: 'button2',
            type: 'primary',
            size: 'small',
            name: '',
            clickEvent: () => {
              if (!this.selectiondatas.length) return this.$message('请至少选择一条数据!')
              this.close()
              this.$emit('addData', this.selectiondatas)
            },
            text: '确认',
            position: 'right'
          },
          {
            compKey: 'button3',
            type: '',
            size: 'small',
            icon: '',
            name: 'reset',
            clickEvent: () => this.$refs.afterSaleImport.reset(),
            text: '重置',
            position: 'right'
          }
        ],
      tableOption: this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
                   this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableOption &&
                   this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableOption.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableOption
        : [
          {
            prop: 'partNo',
            label: '备件编号',
            align: 'center'
          },
          {
            prop: 'partName',
            label: '备件名称',
            align: 'center'
          },
          {
            prop: 'purQty',
            label: '备件数量',
            align: 'center'
          },
          {
            prop: 'userName',
            label: '提交用户',
            align: 'center'
          },
          // {
          //   prop: 'submitName',
          //   label: '提交人',
          //   align: 'center'
          // },
          {
            prop: 'submitTime',
            label: '提交时间',
            align: 'center'
          },
          {
            prop: 'ifBatchNo',
            label: '批次号',
            align: 'center'
          }
          // ,{
          //   prop: 'remark',
          //   label: '备注',
          //   align: 'center'
          // }
        ]
    }
  },
  methods: {
    /**
     * @description 关闭弹窗
     * @time 2021、01、22
     */
    close() {
      this.$emit('close')
    },
    async open() {
      this.$refs['afterSaleImport'].listLoading = true
      let res
      try {
        res = await this.$requestAPI({
          apiUrl: '/mp/e3sh/spareparts/mallorder/partOrderMakeDlrService/queryAfterTechnical.do',
          variables: {...this.fromsField}
        })
        // eslint-disable-next-line no-return-assign
      } catch (e) { return this.$refs['afterSaleImport'].listLoading = false }
      if (res.result !== '1') { return }
      this.$refs['afterSaleImport'].list = res.rows
      this.$refs['afterSaleImport'].pageTotal = res.records
      this.$refs['afterSaleImport'].listLoading = false
    },
    // 禁用上个弹窗已选择 数据
    getSelectable(row, index, ref) {
      return !this.shortList.includes(row['partNo'])
    },
  }
}
</script>
<style scoped>

</style>
